<template>
    <ul class="switch-wrapper clearfix">
        <li v-for="(item, i) in datas" :class="{active: select === i}" :key="i" @click="itemClick(item, i)">
            {{item.name}}
        </li>
    </ul>
</template>

<script>
    export default {
        name: "SwitchCtrl",
        props: {
            datas: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                select: 0
            }
        },
        methods: {
            itemClick(item, i) {
                if (this.select !== i) {
                    this.select = i;
                    this.$emit('item-click', item, i);
                }

            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../assets/scss/define";

    $r: 5px;
    .switch-wrapper {
        > li {
            color: #ffffff;
            padding: 6px 15px;

            border-radius: 0;



            border: 1px solid #ffffff;

            &:first-child {
                border-top-left-radius: $r;
                border-bottom-left-radius: $r;
            }

            &:last-child {
                border-top-right-radius: $r;
                border-bottom-right-radius: $r;
            }

            &.active {
                color: $base-color;
                background-color: #ffffff;
                border-bottom: 1px solid #ffffff;
            }
        }
    }
</style>
